import React, { PureComponent, Fragment } from 'react';
import { Card, Form, Row, Select, Input, Button, DatePicker, Table, Popover } from 'antd';
import { connect } from 'dva';
import moment from 'moment';
// import lodash from 'lodash';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { UserTypeMapper, SorterOrderMapper } from '../../utils/enum';
// import classNames from 'classnames';
import styles from './RememberMeTokenManage.less';

@connect(({ GlobalEnumModel, RememberMeTokenManageModel, loading }) => ({
  GlobalEnumModel,
  RememberMeTokenManageModel,
  queryLoading: loading.effects['RememberMeTokenManageModel/findByPage'],
}))
@Form.create()
export default class RememberMeTokenManage extends PureComponent {

  // 数据初始化
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({ type: 'GlobalEnumModel/allSysName' });
    this.findByPage();
  }

  // 查询数据
  findByPage = (e) => {
    if (e) e.preventDefault();
    const { dispatch, form } = this.props;
    const queryParam = form.getFieldsValue();
    if (queryParam.lastUsedStart) {
      queryParam.lastUsedStart = moment(queryParam.lastUsedStart).format('YYYY-MM-DD 00:00:00');
    }
    if (queryParam.lastUsedEnd) {
      queryParam.lastUsedEnd = moment(queryParam.lastUsedEnd).format('YYYY-MM-DD 23:59:59');
    }
    dispatch({ type: 'RememberMeTokenManageModel/findByPage', payload: { ...queryParam, pageNo: 0 } });
  }

  // 表格数据过滤或跳页
  handleTableChange = (pagination, _, sorter) => {
    const { dispatch, RememberMeTokenManageModel } = this.props;
    const queryParam = { ...RememberMeTokenManageModel.queryParam, pageNo: pagination.current, pageSize: pagination.pageSize };
    // 排序
    if (sorter.field) {
      const sorterMapper = {};
      queryParam.orderField = sorterMapper[sorter.field];
      queryParam.sort = SorterOrderMapper[sorter.order];
    } else {
      queryParam.orderField = undefined;
      queryParam.sort = undefined;
    }
    dispatch({ type: 'RememberMeTokenManageModel/findByPage', payload: queryParam });
  }

  // 查询表单
  queryForm() {
    const { form: { getFieldDecorator }, queryLoading, GlobalEnumModel: { sysNameList }, RememberMeTokenManageModel: { queryParam } } = this.props;
    return (
      <Form onSubmit={this.findByPage} layout="inline" className={styles.queryForm}>
        <Row gutter={{ md: 0, lg: 0, xl: 0 }}>
          <Form.Item label="登录系统">
            {getFieldDecorator('sysName', { initialValue: queryParam.sysName })(
              <Select placeholder="登录系统" allowClear={true}>
                {sysNameList.map(sysName => (<Select.Option key={sysName} value={sysName}>{sysName}</Select.Option>))}
              </Select>
            )}
          </Form.Item>
          <Form.Item label="登录名">
            {getFieldDecorator('username', { initialValue: queryParam.username })(
              <Input placeholder="登录名" />
            )}
          </Form.Item>
          <Form.Item label="手机号">
            {getFieldDecorator('telephone', { initialValue: queryParam.telephone })(
              <Input placeholder="手机号" />
            )}
          </Form.Item>
          <Form.Item label="用户邮箱">
            {getFieldDecorator('email', { initialValue: queryParam.email })(
              <Input placeholder="用户邮箱" />
            )}
          </Form.Item>
        </Row>
        <Row gutter={{ md: 0, lg: 0, xl: 0 }}>
          <Form.Item label="最后使用时间">
            {getFieldDecorator('lastUsedStart', { initialValue: queryParam.lastUsedStart ? moment(queryParam.lastUsedStart) : undefined })(
              <DatePicker placeholder="最后使用时间-开始" style={{ width: 174 }} />
            )}
          </Form.Item>
          <Form.Item label="最后使用时间">
            {getFieldDecorator('lastUsedEnd', { initialValue: queryParam.lastUsedEnd ? moment(queryParam.lastUsedEnd) : undefined })(
              <DatePicker placeholder="最后使用时间-结束" style={{ width: 174 }} />
            )}
          </Form.Item>
          <Form.Item className={styles.formItemButton}>
            <Button type="primary" htmlType="submit" disabled={queryLoading}>查询</Button>
          </Form.Item>
        </Row>
      </Form>
    );
  }

  // 数据表格
  getTable() {
    const { RememberMeTokenManageModel, queryLoading } = this.props;
    const columns = [
      { title: '登录系统', dataIndex: 'sysName' },
      { title: '登录名', dataIndex: 'username' },
      {
        title: '用户类型', dataIndex: 'userType', render: val => {
          let userType = UserTypeMapper[val];
          if (!userType) userType = UserTypeMapper.error;
          return <span style={{ color: userType.color }}>{userType.label}</span>;
        },
      },
      { title: '手机号', dataIndex: 'telephone' },
      { title: '邮箱', dataIndex: 'email' },
      { title: '最后使用时间', dataIndex: 'lastUsed' },
      {
        title: 'Token信息', dataIndex: 'token', render: (_, { series, token, lastUsed }) => {
          const labelStyle = { display: 'inline-block', width: 90, textAlign: 'left' };
          const valueStyle = {};
          const content = (
            <div>
              <div>
                <span style={labelStyle}>Token序列号</span>
                <span style={valueStyle}>{series}</span>
              </div>
              <div>
                <span style={labelStyle}>Token内容</span>
                <span style={valueStyle}>{token}</span>
              </div>
              <div>
                <span style={labelStyle}>最后使用</span>
                <span style={valueStyle}>{lastUsed}</span>
              </div>
            </div>
          );
          return (
            <Popover placement="leftTop" title="Token详情" content={content}>
              <a>Token详情</a>
            </Popover>
          );
        },
      },
      {
        title: '操作', align: 'center', key: 'action',
        render: () => (
          <Fragment>
            <a>删除</a>
          </Fragment>
        ),
      },
    ];
    return (
      <Table
        size="middle"
        bordered={true}
        rowKey={record => record.id}
        columns={columns}
        loading={queryLoading}
        dataSource={RememberMeTokenManageModel.data}
        pagination={RememberMeTokenManageModel.pagination}
        onChange={this.handleTableChange}
      />
    );
  }

  render() {
    return (
      <PageHeaderLayout>
        <Card bordered={false}>
          <div>
            {this.queryForm()}
          </div>
          {this.getTable()}
        </Card>
      </PageHeaderLayout>
    );
  }
}
